<template>
    <div class="app-container calendar-list-container">
        <el-dialog :fullscreen="fullscreen" :visible.sync="isShow" width="800px" top="3%" :show-close="false" :before-close="beforeClose">
            <el-row slot="title">
                <el-col :span="10" style="padding-top: 5px">
                    <span>{{vtDecide == 'add' ? '创建投票': '编辑投票'}}</span>
                </el-col>
                <el-col :span="2" :offset="11">
                    <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                    <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
                </el-col>
            </el-row>
            <el-tabs v-model="defaultActive.voteType" v-loading="loading">
                <el-tab-pane label="类型一" name="first" :disabled="vtDecide == 'edit' && defaultActive.voteType == 'second'">
                    <typeOne ref="oneTemp"></typeOne>
                </el-tab-pane>
                <el-tab-pane label="类型二" name="second" :disabled="vtDecide == 'edit' && defaultActive.voteType == 'first'">
                    <typeTwo ref="twoTemp"></typeTwo>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="parentCloseEvent">取 消</el-button>
                <el-button type="primary" @click="submit">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import typeOne from "./components/typeOne";
import typeTwo from "./components/typeTwo";
import { mapGetters, mapState } from 'vuex'
import { vote_save, vote_findById, vote_edit } from "@/api/vote";

/** doc
 * 此模板为主入口
 * 用于创建和编辑时调用。
 * 子模版分为类型一和类型二
 * 数据传递 vuex
 */
export default {
    name: "create",
    components: { typeOne, typeTwo },
    props: {
        isShow: Boolean
    },
    computed: {
        /**
         * 此处 为了解决 mapGetters 直接渲染 voteType 抛出的异常
         * computed property "voteType" was assigned to but it has no setter.
         */
        ...mapState({
            defaultActive: state => state.vote
        }),
        ...mapGetters([
            'vtDecide', 'voteType', 'vtEditId'
        ])
    },
    data() {
        return {
            fullscreen: false,
            loading: false
        };
    },
    methods: {
        beforeClose(e) {
            this.$emit('closeTemp');
        },
        parentCloseEvent() {
            this.$emit('closeTemp');
        },
        async submit() {//提交表单
            await this.$store.dispatch("SetIsSub", true)// 全局表单判断初始化
            let result = await this.$refs[this.defaultActive.voteType == 'first' ? 'oneTemp' : 'twoTemp'].validate();
            if (result) {
                this.vtDecide == 'add' ? await this.saveObj(result) : await this.editObj(result);
            }
        },
        async editObj(e) {
            let { data } = await vote_edit(e);
            if (data.status == 100) {
                this.$message.success("编辑成功")
                this.$emit('closeTemp');
                this.$emit('initList');
            }
        },
        async saveObj(e) {
            const parms = {...e, company_id: localStorage.getItem("companyId") - 0, vote_type: this.voteType == 'first' ? 1 : 2}
            const { data } = await vote_save(parms);
            if (data.status == 100) {
                this.$message.success("创建成功")
                this.$emit('closeTemp');
                this.$emit('initList');
            }
        },
        async initList() {
            this.$nextTick(async _ => {
                this.loading = true
                let { data } = await vote_findById({ id: this.vtEditId });
                let result;
                if (data.status == 100) {
                    result = data.data;
                }
                let range = {depts: [], groups: []}
                for (let j = 0; j < result.voteRanges.length; j++) {
                    let el = result.voteRanges[j];
                    if (el.range_type == 1) {//dept
                        range.depts.push({ id: el.id, label: el.organization_name, ids:el.organization_id })
                    } else if (el.range_type == 2) {//group
                        range.groups.push({ id: el.id, group_name: el.organization_name, ids:el.organization_id })
                    }
                }
                if (this.vtDecide == 'edit' && this.voteType == 'first') {//表单渲染数据
                    await this.$refs.oneTemp.initList(result, range);
                }else if(this.vtDecide == 'edit' && this.voteType == 'second'){
                    await this.$refs.twoTemp.initList(result, range);
                }
                this.loading = false
            })
        }
    }
};
</script>

